<template>
  <div class="page_padding">
    <MyNavBar @goback="goback" :title="title" />
    <div class="tab_con" v-if="tabsData.length > 1">
      <van-tabs swipe-threshold="1" @click="tabsChange" swipeable>
        <van-tab v-for="item in tabsData" :title="item.nameTitle" :key="item.id"></van-tab>
      </van-tabs>
    </div>
    <div class="content-main content" :class="[{ big: tabsData.length > 1 }]">
      <div class="cont_box cont_box-left" v-if="tabsData.length > 0 && listData.length > 0">
        <div
          class="left-list"
          :class="{ active_select2: item.userId == personId }"
          v-for="item in listData"
          :key="item.userId"
          @click="goOne(item)">
          {{ item.userName }}
        </div>
      </div>
      <div class="cont_box-right">
        <div class="right-title">
          <div class="tab_con_tabs">
            <div class="tabs-left">
              <div
                :class="['tab_li', { active: item.id === cycleActive }]"
                @click="cycleTabSwitch(item)"
                v-for="(item, index) in cycleSwitch"
                :key="index">
                {{ item.label }}
              </div>
            </div>
            <div class="tabs-right" v-if="cycleActive !== '01-05'">
              <div class="time_menu" @click="timeChoose()">
                {{ timeActive }}
                <van-icon class="time_menu_icon" :name="showTime ? 'arrow-up' : 'arrow-down'" />
              </div>
            </div>
          </div>
        </div>
        <div class="spot_con">
          <div class="spot_list" v-for="item in jsbDataList" :key="item.id" @click="goDetail(item)">
            <div class="spot_list_con">
              <div class="list_title">{{ item.title }}</div>
              <div class="list_time">{{ item.timeFrame }}</div>
            </div>
            <div :class="['spot_list_type', item.saveStatus == 1 ? 'complete' : 'hang']">
              {{ statusShow(item.saveStatus) }}
            </div>
          </div>
          <van-empty description="暂无数据" v-if="jsbDataList.length === 0"></van-empty>
        </div>
      </div>
    </div>
    <van-popup v-model="showTime" round position="bottom">
      <van-picker
        show-toolbar
        :columns="timeOption"
        :default-index="timeOption.length - 1"
        @cancel="showTime = false"
        @confirm="onConfirmY" />
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import MyNavBar from '@com/MyNavBar'
import { getlistRecordNoteCalendarV2, getlistLookOrgan, getlistLookUser } from '@api/api-documentary.js'
import { timestampToDateTime } from '@/common/units.js'
export default {
  name: 'Board',
  components: {
    MyNavBar,
  },
  props: {},
  data() {
    return {
      title: '纪实本',
      searchVal: '',
      tabsData: [],
      userInfo: JSON.parse(localStorage.userInfo),
      tenantId: localStorage.tenantId,
      listData: [],
      personId: '',
      firstType: '01-01',
      weekList: [],
      cycleSwitch: [
        { label: '周', id: '01-01' },
        { label: '月', id: '01-02' },
        { label: '季', id: '01-03' },
        { label: '年', id: '01-05' },
      ],
      cycleActive: '01-01',
      timeActive: '2021-01',
      timeOption: [
        { text: '2021-08', value: '2021-08' },
        { text: '2021-09', value: '2021-09' },
        { text: '2021-10', value: '2021-10' },
        { text: '2021-11', value: '2021-11' },
        { text: '2021-12', value: '2021-12' },
      ],
      showTime: false,
      jsbDataList: [],
      userId: localStorage.userId,
      isKeepAlive: false,
    }
  },
  watch: {},
  computed: {
    ...mapGetters('role', ['isOtherRole', 'isNormalRole', 'isAdminRole', 'isMainRole', 'isOrgRole', 'isPartRole']),
  },
  created() {
    this.isKeepAlive = true
  },
  mounted() {
    this.timeActive = timestampToDateTime()
    this.timeList()
    if (this.isNormalRole) {
      this.personId = this.userId
      this.getData()
    } else {
      this.pageInit()
    }
    console.log('123456 :>> ', 123456)
  },
  activated() {
    console.log('123456 :>> ', 4578)
    if (this.isKeepAlive) {
      this.isKeepAlive = false
    } else {
      if (this.personId === this.userId) {
        this.getData()
      }
    }
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    async pageInit() {
      let { data: orgData } = await getlistLookOrgan({
        tenantId: this.tenantId,
        optionUserId: this.userInfo.userId,
      })
      this.tabsData = orgData
      if (this.tabsData.length > 0) {
        let { data: userData } = await getlistLookUser({
          tenantId: this.tenantId,
          id: this.tabsData[0].id,
          optionUserId: this.userInfo.userId,
        })
        this.listData = userData
        this.personId = this.listData[0].userId
      } else {
        this.personId = this.userId
      }
      this.getData()
    },
    async tabsChange(index) {
      let { data: userData } = await getlistLookUser({
        tenantId: this.tenantId,
        id: this.tabsData[index].id,
        optionUserId: this.userInfo.userId,
      })
      this.listData = userData
      if (this.listData.length > 0) {
        this.personId = this.listData[0].userId
        this.getData()
      } else {
        this.jsbDataList = []
      }
    },
    goDetail(item) {
      if (this.userId != this.personId && item.saveStatus == 0) {
        return false
      }
      let str = item.url
      if (item.saveStatus !== '0') {
        str = item.url + '&isEnd=true'
      }
      this.$router.push(str)
    },
    timeList() {
      let arr = this.timeActive.split('-'),
        data = [],
        year = '',
        month = ''
      for (let i = 2022; i <= Number(arr[0]); i++) {
        year = i
        let monthNum = year === Number(arr[0]) ? Number(arr[1]) : 12
        for (let j = 1; j <= monthNum; j++) {
          month = j < 10 ? '0' + j : j
          data.push({ text: String(year) + '-' + String(month), value: String(year) + '-' + String(month) })
        }
      }
      if (this.userInfo.loginPostInfo.orgId == '02.01.0001.0002.0001') {
        this.timeOption = this.timeOption.concat(data)
      } else {
        this.timeOption = data
      }
    },
    yearList() {
      let year = new Date().getFullYear()
      let data = []
      for (let i = 2022; i <= year; i++) {
        data.push({ text: i, value: i })
      }
      this.timeOption = data
    },
    //获取人员纪实
    getData() {
      const year = this.cycleActive === '01-01' ? this.timeActive.split('-')[0] : String(this.timeActive)
      const month = this.cycleActive === '01-01' ? this.timeActive.split('-')[1] : ''
      this.jsbDataList = []
      getlistRecordNoteCalendarV2({
        recordType: this.cycleActive,
        optionUserId: localStorage.userId,
        userId: this.personId || this.userId,
        tenantId: this.userInfo.tenantId,
        year: this.cycleActive === '01-05' ? '' : year,
        month: month,
      }).then(res => {
        this.jsbDataList = res.data
      })
    },

    cycleTabSwitch(item) {
      if (item.id === this.cycleActive) return
      this.cycleActive = item.id
      if (this.cycleActive == '01-01') {
        this.timeActive = timestampToDateTime()
        this.timeList()
      } else {
        this.timeActive = new Date().getFullYear()
        this.yearList()
      }
      // if (this.tabsData.length > 0 && this.listData.length === 0) return
      this.getData()
    },

    // 选择时间
    timeChoose() {
      this.showTime = true
    },
    // 时间确定
    onConfirmY(value) {
      this.timeActive = value.value
      this.getData()
      this.showTime = false
    },
    goOne(item) {
      this.personId = item.userId
      this.getData()
    },
    statusShow(status) {
      if (this.userId === this.personId) {
        return status == '1' ? '已完成' : '去填写'
      } else {
        return status == '1' ? '已完成' : '未完成'
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.page_padding {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tab_con {
  position: absolute;
  top: 46px;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 10;
  overflow-x: scroll;
  border-bottom: 1px solid #ccc;
  &::-webkit-scrollbar {
    height: 0;
  }
  /deep/.van-tabs {
    height: 42px;
  }
  /deep/.van-tabs--line .van-tabs__wrap {
    height: 42px;
  }
  /deep/ .van-tab__text {
    // font-size: 14px;
  }
  /deep/.van-tab--active {
    color: #d91717;
  }
}
.content-main {
  display: flex;
  min-height: 100%;
}
.content {
  position: relative;
  padding-top: 0;
  &.big {
    padding-top: 42px;
  }

  .cont_box {
    padding-top: 0;
    background-color: #efefef;
    .left-list {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 45px;
      border-bottom: 1px solid #f4f4f4;
      color: #333;
      font-size: 13px;
    }
    .active_select2 {
      color: #a57d60;
      border-left: 5px solid #ee0a24;
      background-color: #fff;
      font-weight: bold;
    }
  }
  .cont_box-left {
    width: 75px;
    overflow-y: auto;
  }
  .cont_box-right {
    flex: 1;
    overflow-y: auto;
    .tab_con_tabs {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 45px;
      padding: 0 8px;
      border-bottom: 1px solid #efefef;
      .tabs-right {
        .time_menu {
          font-size: 12px;
          color: #333;
          text-align: center;
        }
        .time_menu_icon {
          margin-top: 2px;
        }
      }
      .tabs-left {
        display: flex;
        border: 2px solid #d7d7d7;
        border-radius: 15px;
        overflow: hidden;
        // padding: 0 5px;
      }
      .tab_li {
        // font-size: 14px;
        color: #333333;
        width: 45px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        &.active {
          background-color: #f4f6f8;
          border-radius: 10px;
          color: #a57d60;
        }
      }
    }
    // 内容列表
    .spot_con {
      // padding: 0 16px;
      .spot_list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 65px;
        border-bottom: 1px solid #efefef;
        padding: 0 16px;
        .spot_list_con {
          flex: 1;
          width: 0;
          display: flex;
          flex-direction: column;
          .list_title {
            // font-size: 14px;
            font-weight: bold;
            color: #333333;
            line-height: 30px;
            @include ellipsis;
          }
          .list_time {
            font-size: 12px;
            color: #666666;
          }
        }
        .spot_list_type {
          height: 28px;
          background-color: rgba($color: #e67f2b, $alpha: 0.1);
          border-radius: 2px;
          font-size: 13px;
          color: #e67f2b;
          padding: 5px 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 75px;
          .clock {
            color: #e67f2b;
            margin-right: 3px;
          }
          // 已完成
          &.complete {
            background-color: transparent;
            color: #3fa83f;
          }
          // 未完成
          &.hang {
            background-color: rgba($color: #ff4343, $alpha: 0.1);
            color: #d91717;
          }
        }
      }
    }
  }
}
/deep/ .van-popup {
  position: absolute;
}
/deep/ .van-overlay {
  position: absolute;
}
</style>
